<template>
  <el-container style="height: 100vh;">
    <el-aside style="width: 25%;background-color: #3f8cff;border-radius: 10px">
      <el-image :src="logoPic" style="margin: 12% 0 0 8%"></el-image>
      <div class="introText">
        Get Started
      </div>
      <div style="height: 300px; max-width: 600px;margin-left: 8%;margin-top: 20px">
        <el-steps direction="vertical" :active="step">
          <el-step title="Valid your phone" />
          <el-step title="Tell about yourself" />
          <el-step title="Tell about your company" />
          <el-step title="Invite Team Members" />
        </el-steps>
      </div>
    </el-aside>
    <el-main style="height: 100vh;overflow: hidden">
      <el-container>
        <el-main style="height: 800px">
          <router-view></router-view>
        </el-main>
        <el-footer style="border-top: 1px solid gray;display: flex;align-items: center;height: calc(100vh - 800px)">
          <el-row justify="space-between" style="width: 100%">
            <el-col :span="12">
              <el-button v-if="step !== 0" type="primary" style="font-size: 18px;" @click="back"><el-icon><Back /></el-icon>&nbsp;Previous</el-button>
            </el-col>
            <el-col :span="12" align="right">
              <el-button type="primary" style="font-size: 18px;" @click="next">Next Step&nbsp;<el-icon><Right /></el-icon></el-button>
            </el-col>
          </el-row>
        </el-footer>
      </el-container>
    </el-main>
  </el-container>
</template>

<script setup>
import logoPic from '@/assets/images/login/Companylogo.png'
import {Back, Right} from "@element-plus/icons-vue";
import {reactive, ref} from "vue";
import {useRouter} from "vue-router";
const router = useRouter()
const step = ref(0)
const next = () => {
  if (step.value <3) {
    step.value++;
    router.push('/register/step' + (step.value + 1))
    console.log(step.value)
  }
}
const back = () => {
  if (step.value > 0) { // 简化为只检查是否大于0
    step.value--;
    router.push('/register/step' + (step.value + 1))
    console.log(step.value)
  }
}

</script>

<style scoped lang="scss">
.introText {
  margin-left: 8%;
  margin-top: 60px;
  color: white;
  font-size: 30px;
  font-family: sans-serif,serif;
  font-weight: bold;
}
:deep(.el-step.is-vertical .el-step__title) {
  color: white;
}
:deep(.el-step__line) {
  background-color: white;
}
:deep(.el-step__head.is-process) {
  border-color: #3f8cff;
}
</style>
